<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<div class="disFlex Flex-between">
                <div class="component-title">{{moduleData.label_name_cn}}</div>
				<div class="disFlex Flex-middle" v-if="moduleData.data.length>0">
					<span class="curpage">1</span>
					<span class="totalpage">/{{moduleData.data.length}}</span>
				</div>
            </div>
			<div v-if="moduleData.data.length>0">
				<p class="rank-title">{{moduleData.data[0].title}}</p>
				<div class="rank-item-wrapper">
					<div v-if="moduleData.data[0].rank_type == 'goods'">
						<div class="rank-item disFlex Flex-middle Flex-between" v-for="(item,index) in moduleData.data[0].list">
							<div class="disFlex Flex-middle">
								<div class="rank-num">{{index+1}}</div>
								<img class="rank-shop-img" :src="item.image_path" alt="">
								<div class="rank-shop-info disFlex vertical">
									<span>{{item.goods_title}}</span>
									<span>¥{{item.goods_group_money}}</span>
								</div>
							</div>
							<div class="icon-wrapper">
								<Icon type="ios-basket-outline" />
							</div>
						</div>
					</div>
					<div v-else>
						<div class="rank-item disFlex Flex-middle" v-for="(item,index) in moduleData.data[0].list">
							<div class="rank-num">{{index+1}}</div>
							<img class="rank-shop-img" :src="item.shop_sign" alt="">
							<div class="rank-shopper-info disFlex vertical Flex">
								<span class="rank-shop-info-title">{{item.shop_title}}</span>
								<div class="rank-shop-info-bottom disFlex Flex-between">
									<span>{{item.shop_briefing}}</span>
									<span><span style="color: black;">{{item.times_visitor}}</span>人逛过</span>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
            <!-- <div style="min-height: 100px;"></div> -->
        </div>
    </div>
</template>

<script>

export default {
  	name: 'RankModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {

    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	
@import url("../baseModule.less");
.component-title {
	font-size: 22px;
}	
.curpage {
	font-size: 23px;
	color: #333;
}
.totalpage {
	line-height: 1.1;
	color: #999;
	transform: translateY(1px);
	font-size: 17px;
}
.rank-title {
	background: linear-gradient(90deg,rgba(5,5,5,0.05),rgba(3,2,2,0.2),rgba(0,0,0,0.05));
	text-align: center;
	width: 80%;
	padding: 5px;
	font-size: 20px;
	color: white;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
.rank-item-wrapper {
	padding:  0 10px;
}
.icon-wrapper {
	min-width: 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
	justify-content: center;
	font-size: 14px;
}
.rank-num {
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 8px;
	text-align: center;
	background: gray;
	font-size: 12px;
	color: white;
}
.rank-shop-img {
	width: 40px;
	height: 40px;
	min-width: 40px;
	margin: 10px;
	border-radius: 3px;
}
.rank-shop-info span:first-child {
	font-size: 14px;
	font-weight: bold;
}
.rank-shop-info span:last-child {
	font-size: 12px;
	color: red;
}

.rank-shop-info-title {
	font-size: 14px;
	font-weight: bold;
}
.rank-shop-info-bottom span {
	font-size: 12px;
	color: gray;
}

.shop-visitor {
	color: gray;
}
</style>
